<template>
<!-- 日程安排 -->
  <div class="daily">
       <!-- 头部 -->
     <div class="daily_hend" >
      <el-button class="daily_hend_bnt" type="primary" plain @click="sings(1)">我的日程</el-button>
      <el-button class="daily_hend_bnt" type="success" plain  @click="sings(2)">创建日程</el-button>
     </div>
        <!-- 我的日程 -->
    <div class="daily_nva">
        <div  class="dailyOne" v-show="sins==1" >
            <el-table :data="dail" height="250" border style="width: 100%,position: relative;">
                <el-table-column prop="UserName" label="员工姓名"  min-width></el-table-column>
                <el-table-column prop="ClTitle"  label="日程标题" min-width></el-table-column>
                <el-table-column prop="Cltime" label="日期" min-width> </el-table-column> 
                <el-table-column  prop="Clcontent" label="日程内容"  min-width> </el-table-column>
                <el-table-column label="操作" min-width>
                  <template slot-scope="scope">
                    <el-button @click="dele(scope.row)" type="text" size="small">删除</el-button>
                     <el-button  @click="keys(scope.row)"  type="text" size="small">查看</el-button>
                 </template>
                </el-table-column> 
            </el-table>
             <p :style="{width:'90%',margin:'auto',textAlign:'right'}">共{{cnt}}条</p>
        </div>
       
        <div class="mc" v-show="flat">
           <img src="../assets/sc.png" @click="sc">
           <h2 :style="{textAlign:'left',width: '80%',margin:'10px auto 0' }">行程:</h2>
          <div class="mc_nr" :style="{margin:'40px auto 0',width: '70%',textAlign:'left'}">{{dail1.Clcontent}}</div>
       </div>
       <!-- 创建日程 -->
        <div class="dailyTwo"  v-show="sins==2">
              <div class="dailyTwo_left">
                      <p>新建日程</p>
                      <div class="dailyTwo_left_left">
                      <el-form ref="form" label-width="80px" size="mini">
                          <el-form-item label="日程标题">
                            <el-input placeholder="请输入" v-model="inputs"></el-input>
                          </el-form-item>
                          

                          <el-form-item label="日程时间">
                             <el-col :span="11">
                                <el-date-picker type="date" placeholder="选择日期" v-model="values" style="width: 100%;"></el-date-picker>
                             </el-col>
                         </el-form-item>
                          
                          <el-form-item label="日程内容">
                            <el-input type="textarea"  :rows="2"  placeholder="请输入内容" v-model="textareas"></el-input>
                           </el-form-item>
                        <el-form-item size="large">
                            <el-button type="primary" @click="onSubmits">立即创建</el-button>
                         </el-form-item>
                    </el-form>
                    </div>
              </div>
              <div class="dailyTwo_right">
                     <div class="dailyTwo_right_One">
                            <div class="block" >
                            <div class="radio">
                                <el-radio-group v-model="reverse">
                                 <el-radio :label="true">倒序</el-radio>
                                <el-radio :label="false">正序</el-radio>
                               </el-radio-group>
                            </div>
                            <div class="dailyTwo_right_OneA" >
                              <el-timeline :reverse="reverse">
                                      <el-timeline-item :style="{fontSize:'12px'}"
                                        v-for="(activity, index) in dail"
                                         :key="index"
                                         :timestamp="activity.Cltime">
                                         <h3>发布成功</h3>{{activity.UserName}}  {{activity.NewsTitle}}  {{activity.Clcontent}}
                                      </el-timeline-item>
                            </el-timeline>
                           </div>
                          </div>
                      </div>
              </div>
        </div>  
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
export default {
     data() {
      return {
          inputs: '',//日程标题标题的双向绑定数据
          
          values: '',//发布时间的双向数据绑定
         
          textareas: '',//日程内容内容的双向绑定数据
          sins:1,
          reverse: true,
        flat:false,//查看的蒙层
        login:{},//存放登录信息
        dail:[],//获取日程安排的数据
        dail1:{}//存放查看的数据
      }
     },
     methods: {
      //获取日程信息
        dai(){
          this.$axios({
                    url:'http://localhost:9090/getcalendarInfo',
                    method:"get",//get请求方式
                }).then(res=>{
                    this.dail=(res.data.data).filter(item=>{
                        return this.login.UserGH==item.UserGH
                    })
                    // console.log(this.dail);
                })
        },
        //点击删除
        dele(val){
          //  console.log(val.ClId);
           let id=val.ClId
           this.$axios({
            url:'http://localhost:9090/deletecalendarInfo',
            method:"post",
            data:Qs.stringify({ClId:id})
           }).then(res=>{

           })
            this.dai()
        },
        //点击查看
         keys(val){
          this.flat=true
          // console.log(val);
          this.dail1=val
         },
         sc(){
          this.flat=false
         },
         sings(num){
         this.sins=num
         },
         //点击创建
         onSubmits(){
           let hours=new Date(this.values).toLocaleString()
           if(this.inputs!=''&&this.textareas!=''&&this.values!=''){
                this.$axios({
            url:'http://localhost:9090/insertcalendarInfo',
            method:'post',
            data:{carobj:{UserGH:this.login.UserGH,
                          ClTitle:this.inputs,
                          Clcontent:this.textareas,
                          Cltime:hours}}
           }).then(res=>{
              this.inputs='',
              this.textareas='',
              this.values=''
           })
           this.dai()
           }
         },
    
     },
         // 计算属性
        computed:{
          cnt(){
            return this.dail.length
          }
       },
        //生命周期挂载后
       mounted() {
      this.login=this.$store.state.logininfo
      this.dai()
      // console.log( this.login);
        },
}
</script>

<style>
   .daily{
    width: 100%;
    height: 540px;
    background: #fff;
   }
    /* 头部 */
   .daily_hend{
    width: 100%;
    height: 10%;
    margin: 0 0 30px 0;
    line-height: 55px;
    text-align: left;
   }
   .daily_hend_bnt{
    margin: 0 20px 0 10px;
   }
   /* 内容 */
   .daily_nva{
    width:98%;
    height: 80%;
    padding: 0 0 0 10px;
   }
   .wdailyOne{
    width: 100%;
   }
   .dailyTwo{
    width: 100%;
   }
   .mc{
    width: 40%;
    height: 300px;
    background: rgba(245, 245, 245, 0.9);
    border-radius: 10px;
    position: absolute;
    top: 100px;
    left:580px;
    
   }
   .mc>img{
    width: 20px;
    position: absolute;
    top: 0px;
    left: 610px;
   }
   .mc_nr{
     background-image:-webkit-linear-gradient(left,red,#fd8403,#c2eb3b,#00ff00,#84fb03,#0000ff); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
    /* border: 1px solid #f00; */
   }
    /* 新建日程 */
     .dailyTwo{
        width: 100%;
        height: 100%;
        overflow: hidden;
     }
     /* 左边 */
     .dailyTwo_left{
        width: 60%;
        height: 100%;
        float: left;
        /* background: #f00; */
     }
     .dailyTwo_left>p{
        height:28px;
        line-height: 28px;
        margin: 20px 0 0 0 ;
      }
       .dailyTwo_left_left{
         width: 60%;
         height: 100%;
         margin:40px auto 0;
      }
      .cj{
        width: 100%;
      }
      .cj>button{
        width: 15%;
         height: 40px;
         margin: 20px 0 0 0;
        border-radius: 15px;
        background: rgb(253, 246, 236);
         border:none;
        outline: none; 
      }
      .cj>button:hover{
        background: rgb(230, 162, 60);
      }
     /* 右边 */
     .dailyTwo_right{
         width: 39%;
        overflow-x: hidden;
        overflow-y: scroll;
        /* background: #f00; */
        text-align: left;
        float: left;
     }
     .radio{
        margin: 20px 0 20px 0;
     }
     .dailyTwo_right_OneA{
         width: 100%;
        height: 300px;
        padding: 10px 0 0 10px;
        overflow-x: hidden;
        overflow-y: scroll;
        border-radius: 10px;
        background: rgb(245, 245, 243);
     }
      .dailyTwo_right::-webkit-scrollbar {
        display: none;
    }
</style>